@charset "utf-8";
$font-size:28px; //定义根字体大小
@function r($px) {
    @return $px/$font-size*1rem;
}
.web {
    width:100%;
    height: 100%;
    background:#f3f4f6;
    //头部
    header {
        width: 100%;
        height: r(90px);
        position: relative;
        top: 0;
        background: #f7f7f7;
        border-bottom: 1px solid #c1c1c1;
        padding:r(14px) r(20px) r(16px);
        text-align:center;
        i {
            font-size: r(38px);
            color: #848689;
            font-weight: bold;
            line-height: r(60px);
        }
        .navbar {
            display:inline-block;
            .nav-button {
                width: r(202px);
                height: r(60px);
                background: white;
                border: r(1px) solid #d62d31;
                border-radius: r(6px);
                font-size: r(28px);
                color: #d62d31;
                text-align: center;
            }
            .nav-button-right {
                margin-left: r(-18px);
            }
            .active {
                background: #d62d31;
                color: white;
                position: relative;
                z-index: 1;
            }
        }
        .circle {
            width: r(13px);
            height: r(13px);
            border-radius: 50%;
            background: white;
            position: absolute;
            left: 48.7%;
            top: 42%;
            z-index: 2;
        }
    }
    //内容
    section {
        width: 100%;
        position: absolute;
        top: r(90px);
        bottom: 0;
        overflow: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        
        //列表
        .list {
            width: 100%;
            height: r(130px);
            border-bottom: r(1px) solid #dddddd;
            padding: r(19.2px) r(19.2px) 0;
            line-height: r(35px);
            background:white;
            .message-bg{
                width:r(35px);
                height:r(35px);
                background: url(../../images/order_manage/bg_message.png) no-repeat center/100%;
                position:absolute;
                left:15.3%;
                top:r(9px);
                em{
                    color:white;
                    position:absolute;
                    bottom:r(17px);
                    left:r(3px);
                    font-size: r(35px);
                }
            }
            a{
                display:block;
            }
            .img {
                width: r(90px);
                height: r(90px);
                line-height: r(130px);
                display: inline;
                margin-right: 4.5%;
                img {
                    width: 100%;
                }
            }
            .list-name{
                font-size: r(26px);
                color: #333333;
                margin-top: r(10px);
                display: inline-block;
                white-space: nowrap;
                overflow-x: hidden;
                text-overflow: ellipsis;
                max-width: r(170px);
            }
            em,
            .consume{
                display: inline-block;
                vertical-align: top;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .consume {
                font-size: r(20px);
                color: #666666;
                max-width: r(350px);
                img{
                    vertical-align: text-bottom;
                    width:r(35px);
                    height:r(35px);
                }
            }
            .consume-right {
                font-size: r(26px);
                color: #666666;
                position: relative;
                bottom: r(44px);
                em {
                    max-width: r(200px);
                }
            }
        }
    }
}
//媒体查询
@media screen and (min-width:320px){
    html{
        font-size:14px;
    }
}
@media screen and (min-width:360px){
    html{
        font-size:16px;
    }
}
@media screen and (min-width:375px){
    html{
        font-size:16.5px;
    }
}
@media screen and (min-width:414px){
    html{
        font-size:18px;
    }
}